M
MLOG
React Suspense Resurslarini Dedublikatsiya Qilish: Takroriy So'rovlarning Oldini Olish | MLOG | MLOG

Endi, `UserResource` `cache` ichida resurs mavjudligini tekshiradi. Agar mavjud bo'lsa, keshlangan resurs qaytariladi. Aks holda, yangi so'rov boshlanadi va natijadagi promise keshda saqlanadi. Bu har bir noyob `userId` uchun faqat bitta so'rov yuborilishini ta'minlaydi.

2. Maxsus Keshlash Kutubxonasidan Foydalanish (masalan, `lru-cache`)

Murakkabroq keshlash stsenariylari uchun `lru-cache` yoki shunga o'xshash maxsus keshlash kutubxonasidan foydalanishni o'ylab ko'ring. Ushbu kutubxonalar Eng Kam Foydalanilgan (LRU) yoki boshqa siyosatlarga asoslangan keshni tozalash kabi xususiyatlarni taqdim etadi, bu esa, ayniqsa, ko'p sonli resurslar bilan ishlaganda xotiradan foydalanishni boshqarish uchun juda muhim bo'lishi mumkin.

Avval kutubxonani o'rnating:

            
npm install lru-cache

Keyin, uni `UserResource`'ingizga integratsiya qiling:

            
import React, { Suspense } from 'react';
import LRUCache from 'lru-cache';

const fetchUser = (userId) => {
  console.log(`Foydalanuvchini yuklash, ID: ${userId}`); // Tarmoq so'rovini simulyatsiya qilish
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: userId, name: `Foydalanuvchi ${userId}`, email: `user${userId}@example.com` });
    }, 1000); // Tarmoq kechikishini simulyatsiya qilish
  });
};

const cache = new LRUCache({
  max: 100, // Keshdagi elementlarning maksimal soni
  ttl: 60000, // Millisaniyedagi yashash muddati (1 daqiqa)
});

const UserResource = (userId) => {
  if (!cache.has(userId)) {
    let promise = null;
    let status = 'pending'; // kutilmoqda, muvaffaqiyatli, xato
    let result;

    const suspender = fetchUser(userId).then(
      (r) => {
        status = 'success';
        result = r;
        cache.set(userId, {
          read() {
            return result;
          },
        });
      },
      (e) => {
        status = 'error';
        result = e;
        cache.set(userId, {
          read() {
            throw result;
          },
        });
      }
    );

    cache.set(userId, {
        read() {
            if (status === 'pending') {
                throw suspender;
            } else if (status === 'error') {
                throw result;
            }
            return result;
        }
    });
  }

  return cache.get(userId);
};


const UserProfile = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
Foydalanuvchi Profili

      
ID: {user.id}

      
Ism: {user.name}

      
Email: {user.email}

    

  );
};

const UserDetails = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
Foydalanuvchi Tafsilotlari

      
ID: {user.id}

      
Ism: {user.name}

    

  );
};

const App = () => {
  return (
    Yuklanmoqda...
}> ); }; export default App;

Ushbu yondashuv kesh hajmi va yaroqlilik muddati siyosati ustidan ko'proq nazoratni ta'minlaydi.

3. `axios-extensions` kabi Kutubxonalar bilan So'rovlarni Birlashtirish

`axios-extensions` kabi kutubxonalar so'rovlarni birlashtirish kabi ilg'or xususiyatlarni taklif etadi. So'rovlarni birlashtirish bir nechta bir xil so'rovlarni bitta so'rovga birlashtiradi va tarmoqdan foydalanishni yanada optimallashtiradi. Bu, ayniqsa, so'rovlar bir-biriga juda yaqin vaqt oralig'ida boshlangan stsenariylarda foydalidir.

Avval kutubxonani o'rnating:

            
npm install axios axios-extensions

Keyin, Axios'ni `axios-extensions` tomonidan taqdim etilgan `cache` adapteri bilan sozlang.

`axios-extensions` yordamida misol va resurs yaratish:

            
import React, { Suspense } from 'react';
import axios from 'axios';
import { cacheAdapterEnhancer, throttleAdapterEnhancer } from 'axios-extensions';

const instance = axios.create({
  baseURL: 'https://api.example.com', // O'zingizning API manzilingiz bilan almashtiring
  adapter: cacheAdapterEnhancer(axios.defaults.adapter, { enabledByDefault: true }),
});

const fetchUser = async (userId) => {
  console.log(`Foydalanuvchini yuklash, ID: ${userId}`); // Tarmoq so'rovini simulyatsiya qilish
  const response = await instance.get(`/users/${userId}`);
  return response.data;
};


const UserResource = (userId) => {
    let promise = null;
    let status = 'pending'; // kutilmoqda, muvaffaqiyatli, xato
    let result;

    const suspender = fetchUser(userId).then(
        (r) => {
            status = 'success';
            result = r;
        },
        (e) => {
            status = 'error';
            result = e;
        }
    );

    return {
        read() {
            if (status === 'pending') {
                throw suspender;
            } else if (status === 'error') {
                throw result;
            }
            return result;
        },
    };
};


const UserProfile = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
Foydalanuvchi Profili

      
ID: {user.id}

      
Ism: {user.name}

      
Email: {user.email}

    

  );
};

const UserDetails = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
Foydalanuvchi Tafsilotlari

      
ID: {user.id}

      
Ism: {user.name}

    

  );
};

const App = () => {
  return (
    Yuklanmoqda...
}> ); }; export default App;

Bu Axios'ni kesh adapteridan foydalanish uchun sozlaydi va so'rov konfiguratsiyasiga asoslanib javoblarni avtomatik tarzda keshlaydi. `cacheAdapterEnhancer` funksiyasi keshni sozlash uchun, masalan, maksimal kesh hajmini yoki yaroqlilik muddatini belgilash kabi imkoniyatlarni taqdim etadi. `throttleAdapterEnhancer` ham ma'lum bir vaqt ichida serverga yuboriladigan so'rovlar sonini cheklash uchun ishlatilishi mumkin, bu esa samaradorlikni yanada optimallashtiradi.

Resurslarni Dedublikatsiya Qilish bo'yicha Eng Yaxshi Amaliyotlar

Ma'lumotlarni Yuklash va Dedublikatsiya Qilish bo'yicha Global Mulohazalar

Global auditoriya uchun ma'lumotlarni yuklash strategiyalarini loyihalashda bir nechta omillarni hisobga olish kerak:

Masalan, global auditoriyaga mo'ljallangan sayohatlarni bron qilish veb-sayti turli mintaqalarda joylashgan serverlardan parvoz va mehmonxona mavjudligi ma'lumotlarini taqdim etish uchun CDN'dan foydalanishi mumkin. Veb-sayt, shuningdek, narxlarni foydalanuvchining mahalliy valyutasida ko'rsatish uchun valyuta konvertatsiyasi API'sidan foydalanadi va til afzalliklariga qarab qidiruv natijalarini filtrlash imkoniyatlarini taqdim etadi.

Xulosa

Resurslarni dedublikatsiya qilish Suspense'dan foydalanadigan React ilovalari uchun muhim optimallashtirish usulidir. Takroriy ma'lumotlarni yuklash so'rovlarining oldini olish orqali siz samaradorlikni sezilarli darajada oshirishingiz, server yuklamasini kamaytirishingiz va foydalanuvchi tajribasini yaxshilashingiz mumkin. Oddiy promise keshini amalga oshirishni tanlaysizmi yoki `lru-cache` yoki `axios-extensions` kabi ilg'or kutubxonalardan foydalanasizmi, asosiysi - asosiy tamoyillarni tushunish va o'zingizning maxsus ehtiyojlaringizga eng mos keladigan yechimni tanlashdir. Turli auditoriyalar uchun ma'lumotlarni yuklash strategiyalarini loyihalashda CDNlar, mahalliylashtirish va foydalanish imkoniyati kabi global omillarni hisobga olishni unutmang. Ushbu eng yaxshi amaliyotlarni qo'llash orqali siz tezroq, samaraliroq va foydalanuvchilar uchun qulayroq React ilovalarini yaratishingiz mumkin.